<template>
  <div>
    <van-popup v-model:show="open" position="bottom" closeable close-icon="arrow-left"
      :style="{ height: '100%', background: 'linear-gradient(0deg, #0E1011, #222222)' }" close-icon-position="top-left">
      <!-- 密码输入框 -->
      <div class="time">
        <p>请输入交易密码</p>
        <!-- <h1>{{formData.tips}}</h1> -->
      </div>
      <van-password-input :value="formData.pasteResult" :focused="formData.showKeyboard"
        @focus="formData.showKeyboard = true" :mask="true" />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="formData.pasteResult" :show="formData.showKeyboard"
        @blur="formData.showKeyboard = false" @input="onInput" />
    </van-popup>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { editPay, getCode, imgcode, } from "@/api/user";
import { useRouter } from 'vue-router'
import { useStore } from "vuex";
import { setLocal } from "@/utils/localStorage";
import { Popup, Toast } from "vant";
import { stringNum } from "@/utils/phone";
export default defineComponent({
  watch: {
    paydata: {
      handler(val) {
        console.log(val)
      }
    }
  },
  components: {
    Popup
  },
  props: {
    paydata: {
      type: Object,
      default: ''
    }
  },
  setup(props, context) {
    console.log("props===", props, context);
    // const pObj = toRefs(props).name.value.mobile;
    // 
    const store = useStore()
    const router = useRouter()
    const setdata = toRefs(props).paydata

    const open = ref(false)
    const formData = reactive({
      tips: "输入交易密码",
      paywarp: true,
      repaywarp: false,
      repaypwd: "",
      pasteResult: '',
      showKeyboard: true,
      reshowKeyboard: false
    })
    const onInput = async (key) => {
      formData.pasteResult = (formData.pasteResult + key).slice(0, 6);
      console.log(setdata, "setdata")
      let str = stringNum(formData.pasteResult)
      if (stringNum(formData.pasteResult) === 6) {
        const data = {
          payPassword: formData.pasteResult,
          bankUserName: setdata.value.bankUserName,
          bankSubName: setdata.value.bankSubName,
          bankName: setdata.value.bankName,
          bankAccount: setdata.value.bankAccount,
          alipayAccount: setdata.value.alipayAccount,
          alipayName: setdata.value.alipayName,
          weixinAccount: setdata.value.weixinAccount,
          weixinName: setdata.value.weixinName,
          usdtAddr: setdata.value.usdtAddr
        }
        const res = await editPay(data)
        if (res.data.success) {
          open.value = false
          formData.pasteResult = ""
          Toast("操作成功")
          // router.back()
          await store.dispatch('user/getUserAll')
        } else {
          Toast(res.data.message)
        }
        formData.pasteResult = ""
        formData.showKeyboard = false
      }
    }
    return {
      open,
      onInput,
      formData,
    }
  }
})
</script>
<style lang="less" scoped>
&:deep(.van-password-input__security) {
  i {
    background: #ffffff !important;
  }
}

.time {
  margin: 160px 0px 100px;

  p {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.8;
    text-align: center;
  }

  h1 {
    text-align: center;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

&:deep(.van-hairline--surround:after) {
  border-width: 0px;
}

&:deep(.van-hairline--left:after) {
  opacity: 0;
}

&:deep(.van-password-input__item) {
  margin-left: 20px;
  margin: 10px;
  height: 80px;
  background: #282a2c;
  border: 1px solid #ffffff;
  border-radius: 18px;
}
</style>